import { MutationTree } from 'vuex'
import { NavStyle, PageStyle, DEFAULT_THEME_COLORS, LAYOUT_SIZE } from '~/constants'

interface Menus {
    collapsed: boolean // 菜单是否收起来
}
interface Navs {
    fullscreen: boolean // 是否全屏
    layoutSize: LAYOUT_SIZE
}
interface AdminState {
    menus: Menus
    navs: Navs
    pageStyle: PageStyle
    navStyle: NavStyle
    theme: typeof DEFAULT_THEME_COLORS[0]
}
export const state = () => {
  return {
    menus: {
        collapsed: false
    },
    navs: {
        fullscreen: false,
        layoutSize: LAYOUT_SIZE.small
    },
    pageStyle: PageStyle.whiteAndBlack,
    navStyle: NavStyle.left,
    theme: DEFAULT_THEME_COLORS[0]
  } as AdminState
}

export type RootState = ReturnType<typeof state>


export const mutations: MutationTree<RootState> = {
  SET_STATE(state, newState: AdminState) {
    for (const key in newState) {
        if (Object.prototype.hasOwnProperty.call(newState, key)) {
            // @ts-ignore
            state[key] = newState[key]
        }
    }
    // @ts-ignore
    this.$cookies.set('_store/admin', state)
 },

  // 设置菜单是否收起
  SET_MENUS_COLLAPSED(state, collapsed: Menus['collapsed']) {
    state.menus.collapsed = collapsed
    // @ts-ignore
    this.$cookies.set('_store/admin', state)
  },

  // 设置是否全屏
  SET_NAVS_FULLSCREEN(state, fullscreen: Navs['fullscreen']) {
    state.navs.fullscreen = fullscreen
    // @ts-ignore
    this.$cookies.set('_store/admin', state)
  },

  // 设置字体大小
  SET_NAVS_LAYPOUTS_SIZE(state, layoutSize: Navs['layoutSize']) {
    state.navs.layoutSize = layoutSize
    // @ts-ignore
    this.$cookies.set('_store/admin', state)
  },

  // 设置是pageStyle
  SET_PAGESTYLE(state, pageStyle: PageStyle) {
    state.pageStyle = pageStyle
    // @ts-ignore
    this.$cookies.set('_store/admin', state)
  },

   // 设置是navStyle
   SET_NAVSTYLE(state, navStyle: NavStyle) {
    state.navStyle = navStyle
    // @ts-ignore
    this.$cookies.set('_store/admin', state)
  },

  // 设置是theme
  SET_THEME(state, theme: AdminState['theme']) {
    state.theme = theme
    // @ts-ignore
    this.$cookies.set('_store/admin', state)
  },

}

